<template>
  <div class="home-guide-container">
    <div class="left-guide">
      <guide-source
        :cgoods="goods"
        :pageSize="pageSize"
        :url="url"
        :total="total"
        @handleSearch="handleSearch"
        @pageClick="pageClick"
      ></guide-source>
    </div>
    <div class="right-guide">
      <div class="btn-content" v-if="!isUserAdmin && !isUserExpert">
        <a @click="AllExBtn" style="cursor: pointer">在线问答</a> |
        <a @click="AllExBtn" style="cursor: pointer">专家预约</a>
      </div>
      <div class="professioner-item">
        <div
          style="font-size: 18px; display: flex; justify-content: space-between"
        >
          <strong>专家列表</strong>
          <a style="font-size: 12px; cursor: pointer" @click="AllExBtn"
            >更多专家>></a
          >
        </div>
        <div
          class="epert"
          v-for="(item, index) in expertArray"
          :key="index"
          :style="
            index === expertArray.length - 1
              ? ''
              : 'border-bottom: 1px dashed #f2f2f2;'
          "
        >
          <img src="../assets/file/avatar/experta.png" alt="" />
          <div class="info">
            <div class="item-style">
              <div class="content">专家姓名：{{ item.realName }}</div>
              <div class="content">职称：{{ item.position }}</div>
            </div>
            <div class="item-style">
              <div class="content">从事专业：{{ item.profession }}</div>
              <div class="content">电话：{{ item.phone }}</div>
            </div>
            <div class="item-content">单位：{{ item.belong }}</div>
            <div class="item-btn">
              <div
                class="btn-item"
                @click="handleQuestion(item)"
                v-if="!isUserAdmin && !isUserExpert"
              >
                去提问
              </div>
              <div
                class="btn-item"
                @click="handleAppointment(item)"
                v-if="!isUserAdmin && !isUserExpert"
              >
                去预约
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useUserInfoStore } from "../stores/user";
// import {  selectExpert } from "../api/order";
import GuideSource from "../components/GuideSource.vue";
import { getAllExpert } from "../api/expert";

const userStore = useUserInfoStore();

const goods = ref([]);
const total = ref(0);
const searchValue = ref("");
const pageSize = ref(30);
const url = ref("/order/goods/");
const expertCount = ref(1);
const guideCount = ref();
const expertArray = ref([]);
// const imgShowRoad = ref(store.state.imgShowRoad);
const isUserAdmin = ref(false);
const isUserExpert = ref(false);

if (userStore.info.role == "admin" || userStore.info.role == "expert") {
  isUserAdmin.value = true;
}

onMounted(() => {
  getData();
  getExpertData();
});

function pageClick(item) {
  goods.value = item;
}

import { useRouter } from "vue-router";

const router = useRouter();
function AllExBtn() {
  // 使用 useRouter 钩子
  router.push("/home/allExpert").catch((err) => err);
}

function handleSearch(val) {
  searchValue.value = val;
  getData();
}
import { selectQuestionPage } from "../api/question";
const getData = async () => {
  let res = await selectQuestionPage(1);
  if (res.code == 0) {
    goods.value = res.data.records;
    total.value = res.data.total;
    pageSize.value = res.data.pages;
  } else {
    // alert(res.message);
    ElMessage.error(res.message);
  }
};

import { ElMessage } from "element-plus";

function getExpertData() {
  getAllExpert()
    .then((res) => {
      if (res.code == 0) {
        expertArray.value = res.data;
      } else {
        // this.$message.error(res.message);
        ElMessage.error(res.message);
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

function handleQuestion(item) {
  router.push(`/home/question?id=${item.userName}`).catch((err) => err);
}

function handleAppointment(item) {
  router.push(`/home/appointment?id=${item.userName}`).catch((err) => err);
}
</script>

<style lang="less" scoped>
.home-guide-container {
  width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .left-guide {
    margin-top: 10px;
  }
  .right-guide {
    margin-top: 10px;
    .btn-content {
      background-color: white;
      width: 350px;
      font-size: 16px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      height: 40px;
      line-height: 40px;
    }
    .professioner-item {
      background-color: #fff;
      width: 350px;
      font-size: 12px;
      padding: 10px 20px;
      margin-top: 10px;
    }
  }
}

.epert {
  min-height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
  // padding: 10px 10px;
  img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    border-radius: 6px;
  }
  .item-style {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  p {
    margin: 5px;
  }
  .content {
    color: #333;
    font-size: 12px;
    font-style: normal;
    width: 120px;
    line-height: 25px;
  }
  .item-content {
    width: 220px;
    line-height: 25px;
    /*超出的部分隐藏*/
    overflow: hidden;
    /*文字用省略号替代超出的部分*/
    text-overflow: ellipsis;
    word-break: break-all;
    /*弹性伸缩盒子模型显示*/
    display: -webkit-box;
    /*限制在一个块元素显示文本的行数*/
    -webkit-line-clamp: 2;
    /*设置或检索伸缩盒对象的子元素排列方式*/
    -webkit-box-orient: vertical;
  }
  .item-btn {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 10px;
    margin-right: 10px;
    color: #67c23a;
    .btn-item {
      margin-left: 10px;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
        color: #035d1c;
      }
    }
  }
}
</style>